<template>
  <div class="mine">
    <div class="nav">
      <van-image
        round
        width="2rem"
        height="2rem"
        fit="cover"
        :src="info.photo"
      />
      <div class="info">
        <div class="name">{{ info.name }}</div>
        <div class="birth">{{ info.birthday }}</div>
      </div>
    </div>
    <div class="record">
      <van-row>
        <van-col span="8">
          <van-icon name="newspaper-o" />
          <div>我的作品</div>
        </van-col>
        <van-col span="8">
          <van-icon name="star-o" />
          <div>我的收藏</div></van-col
        >
        <van-col span="8">
          <van-icon name="tosend" />
          <div>阅读历史</div></van-col
        >
      </van-row>
    </div>
    <div>
      <van-cell icon="edit" to="/mine/edit" title="编辑资料" is-link />
      <van-cell icon="chat-o" to="/mine/chat" title="小智同学" is-link />
      <van-cell icon="setting-o" title="系统设置" is-link />
      <van-cell icon="info-o" @click="doLogion" title="退出登录" is-link />
    </div>
  </div>
</template>

<script>
export default {
  name: 'mine',
  created () {
    this.$store.dispatch('reqUserInfo')
  },
  computed: {
    info () {
      // 从vuex中取出数据
      return this.$store.state.userInfo
    }
  },
  methods: {
    doLogion () {
      // 清空token
      this.$store.commit('logion')
      // 退回登录页
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less">
.mine {
  .nav {
    height: 140px;
    background-color: #3296fa;
    display: flex;
    align-items: center;
    .van-image {
      margin-left: 20px;
      margin-right: 10px;
    }
    .info {
      font-size: 16px;
      color: #fff;
      .birth {
        margin-top: 5px;
        color: #3296fa;
        background-color: #fff;
      }
      .name {
        font-weight: 700;
      }
    }
  }
  .record {
    margin: 20px 0;
    .van-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 16px;
      .van-icon {
        margin-bottom: 5px;
        font-size: 26px;
        &-newspaper-o {
          color: #3296fa;
        }
        &-star-o {
          color: #ff0000;
        }
        &-tosend {
          color: #ffbd00;
        }
      }
    }
  }
}
</style>
